<template>
   <div id="portraithead" style=" overflow:hidden; background:#FFFFFF;">
      <div style="width: 100%; borderBottom:1px solid #EEEEEE; padding:0 20px; overflow:hidden; height:50px;">
         <p class="headerStyle" style="float:left">系统全局安全状况</p>
         <p class="headerStyle" style="float:right; fontWeight:normal; fontSize:12px;">更新时间：{{tableNewTime.static_time}}</p>
      </div>
      <!-- 第一部分 -->
      <div style=" padding: 20px 20px; overflow:hidden;">
        <div class="first" style="overflow:hidden;">
          <div class="firstChild" style="margin-right:1.2%;">
             <div style="overflow:hidden;height:40px;border-bottom:1px solid #EEEE; lineHeight:40px;">
               <div class="webScore" style="width:35%">
                 <p class="webScorenum" style="padding-left: 20px; height: 40px; width:100px">系统综合评分</p>
               </div>
               <div class="webScore" style="overflow:hidden;width:65%" >
                 <div class="webScorenum" style="float:left;margin-right:24px;">
                   <p class= "webFont" style="margin-top:4px;">{{tablewebcompreScore.real_score}}</p>
                   <p class= "webFont" style="fontWeight:normal">实时风险</p>
                 </div>
                 <div class="webScorenum" style="float:left;margin-right:24px;">
                   <p class= "webFont" style="margin-top:4px;">{{tablewebcompreScore.usability_score}}</p>
                   <p class= "webFont" style="fontWeight:normal">运行情况</p>
                 </div>
                 <div class="webScorenum" style="float:left;margin-right:24px;">
                   <p class= "webFont" style="margin-top:4px;">{{tablewebcompreScore.all_handle_score}}</p>
                   <p class= "webFont" style="fontWeight:normal">运营能力</p>
                 </div>
                 <div class="webScorenum" style="float:left;margin-right:24px;">
                   <p class= "webFont" style="margin-top:4px;">{{tablewebcompreScore.warning_score}}</p>
                   <p class= "webFont" style="fontWeight:normal">风险预警</p>
                 </div>
                 <div class="webScorenum" style="float:left;">
                   <p class= "webFont" style="margin-top:4px;">{{tablewebcompreScore.avg_all_score}}</p>
                   <p class= "webFont"  style="fontWeight:normal">历史安全</p>
                 </div>
                
               </div>
             </div>
             <div style="height:150px; width:30%; float:left; textAlign:center; margin-top:50px;">
                <canvas id="fontStyle" width="200" height="100" ></canvas>
               <p style="color:#1f92ef; fontSize:12px;">系统数量：{{tablegetwebnum}}</p>
             </div>
             <div style="height:250px; width:70%; float:left">
               <div ref = "webcounts"  id="webcount" style="width:100%; height:240px;"></div> 
             </div>
          </div>
          <div class="firstChild">
            <div style="overflow:hidden;height:40px;border-bottom:1px solid #EEEE; lineHeight:40px;">
              <div style="float:left; width:52%; height:100%">
                 <p class="webScorenum" style="padding-left: 20px;">评分趋势</p>
              </div>
              <div style="float:left; width:48%; padding-right:20px;">
                <at-radio-group  v-model="radio3">
                  <at-radio-button  label="30天"></at-radio-button>
                  <at-radio-button  label="90天"></at-radio-button>
                  <at-radio-button  label="半年"></at-radio-button>
                  <at-radio-button  label="一年"></at-radio-button>
                  <at-radio-button  label="全部"></at-radio-button>
                </at-radio-group>
              </div>
            </div>
            <div ref='scoretrendmsg' id="scoreTrend" style="width:100%; height:250px;"></div> 
          </div>
       </div>
       <!-- 第二部分 -->
       <div class="second" style="overflow:hidden;">
          <div class="firstChild" style="margin-right:1.2%">
             <div style="overflow:hidden;height:40px;border-bottom:1px solid #EEEE; lineHeight:40px;">
               <div class="webScore" style="width:35%">
                 <p class="webScorenum" style="padding-left: 20px; width:180px;">系统事件分布</p>
               </div>
             </div>
             <div style="height:250px; width:100%; float:left">
               <ATBar 
                    ref='risktype'
                    style="width:100%;height:100%;"
                    :xData="tablethreatarea['risk_type']" 
                    :yData="tablethreatarea['total']" 
                    :leftspace="'20px'" 
                    :rightspace="'20px'" 
                    :topspace="'00px'" 
                    :showDownloadIcon='false'
                    :bottomspace="'30px'"
                    ></ATBar>
             </div>
          </div>
          <div class="secondChild">
            <div style="overflow:hidden;height:40px;border-bottom:1px solid #EEEE; lineHeight:40px;">
              <div style="float:left; width:30%; height:100%">
                 <p class="webScorenum" style="padding-left: 20px;">事件等级分布</p>
              </div>
            </div>
            <div id="circle" style="height:250px; width:86%; float:left;"></div>
          </div>
       </div>
       <!-- 第三部分 -->
       <div class="third">
          <div class="firstChild" style="margin:0;">

          <div style="width:100%; overflow:hidden">
        <!-- 表格样式 -->
        <div style="border: 1px solid #EEEEEE;">
          <div style="border:none ; 
                      borderBottom: 1px solid #EEEEEE;
                      overflow:hidden;" >
             <div class="title" style=" fontSize:14px;
                                        float:left; ">
              <p>系统安全评分排名</p>
           </div>
          </div>
           <div style="padding:20px 20px 0 20px; width:100%">
              <div style="float:right;  margin-top:-10px">
              <at-search v-model="search" 
                        placeholder="请输入系统名称..." 
                        type="text" 
                        project='mh' 
                        @keyup.enter.native="handleIconClick" 
                        icon="search" 
                        @click="handleIconClick" 
                        :on-icon-click="handleIconClick"/>
            </div>
            <div style="width:100%">
                <at-table 
                style="width:100%"
                :data="getweblist['dataSource']"
                :show-header="true"
                :border="false"
                @sort-change="sortChange"
                @filter-change="filterChange"
                @cell-click = 'alert'>
                <at-table-column 
                prop="rank" 
                label="排名" 
                ref="a"
                sortable
                width="90"
                >
                </at-table-column>
                <at-table-column 
                prop="info_sys_name" 
                label="系统名称" 
                ref="a"
                width="auto"
                :show-overflow-tooltip=true 
                >
                </at-table-column>
                
                <at-table-column 
                prop="all_score" 
                label="安全评分" 
                ref="a"
                sortable
                width="150"
                align="left"
                >
                <template  slot-scope="scope">
                          <span  style="font-weight: 900">{{scope.row.all_score}}</span>
                </template>
                </at-table-column>
                <at-table-column 
                prop="vara_score" 
                label="评分变化"
                sortable
                align="left"
                width="150"
                >
                <template  slot-scope="scope">
                          <span v-if="scope.row.vara_score > 0 " style="color:#02bc77 ">+{{scope.row.vara_score}}</span>
                          <span v-else-if="scope.row.vara_score == 0 " style="color:#02bc77 ">{{scope.row.vara_score}}</span>
                          <span v-else style="color:#FF3333 ">{{scope.row.vara_score}}</span>
                </template>
                </at-table-column>
                <at-table-column 
                prop="real_score" 
                label="实时风险" 
                ref="a" 
                sortable
                align="left"
                width="150"
                >
                </at-table-column>
                <at-table-column 
                prop="usability_score" 
                label="运行情况" 
                ref="a" 
                sortable
                align="left"
                width="150"
                >
                </at-table-column>
                <at-table-column 
                prop="all_handle_score" 
                label="运营能力" 
                ref="a" 
                sortable
                align="left"
                width="150"
                >
                </at-table-column>
                <at-table-column 
                prop="warning_score" 
                label="风险预警" 
                ref="a" 
                sortable
                align="left"
                width="150"
                >
                </at-table-column>
                <at-table-column 
                prop="avg_all_score" 
                label="历史安全" 
                ref="a" 
                sortable
                align="left"
                width="150"
                >
                </at-table-column>
                </at-table>
            </div>
            <div style=" margin :20px 34%">
                    <Pagination :currentPage="this.parameterweblist.pagination.current" 
                    :total="getweblist['total']['total']" 
                    :pageSizes="[20,40,60]" 
                    :pageSize="this.parameterweblist.pagination.pageSize"
                    @current-change="handleCurrentChange"
                    @size-change="handleSizeChange" layout='total, sizes, prev, pager, next, jumper'></Pagination>
            </div>
           </div>
        </div>
      </div>

          </div>
       </div>
      </div> 
   </div>
</template>
<script>
import { mapState } from 'vuex'
import $http from '../../../utils/http.js'
import { Notification } from 'AtElement'
export default {
  name: 'portraitHead',
  data () {
    return {
      activeName: 'first',
      radio3: '30天',
      search: '',
      titlename: '',
      // 传的参数
      parameterweblist: {
        pagination: {
          current: 1, // 当前页码
          pageSize: 20 // 当前页显示的数据条数
        },
        search: {
          value: '' // 需要模糊搜索的值（搜索框）
        },
        sorter: {
          field: 'brank', // 排序的字段
          order: 'ascing' // 升序还是降序
        },
        filters: {
          // 需要被过滤的字段
          bwebsite_level: [],
          bbelong_area: []
        }
      },
      getweblist: {
        'dataSource': [],
        'total': {
          'total': 0
        }
      }
    }
  },
  methods: {
    // 换页
    handleCurrentChange (page) {
      this.parameterweblist.pagination.current = page
      this.getdata()
    },
    // 改变每页条数
    handleSizeChange (pagesize) {
      this.parameterweblist.pagination.pageSize = pagesize
      this.getdata()
    },
    alert (value) {
      this.$router.push({
        path: `/statistic/safetyProfile/safetyProhome/${value.info_sys_id}`
      })
    },
    handleIconClick () {
      this.parameterweblist.search.value = this.search
      this.getdata()
    },
    filterChange (val) {
      this.parameterweblist.filters = val
      this.getdata()
    },
    sortChange ({ prop, order }) {
      if (order !== null) {
        if (order == 'ascending') {
          order = 'ascing'
        } else {
          order = 'descing'
        }
        let data = {
          'prop': 'b' + prop,
          'order': order
        }
        this.parameterweblist.sorter.field = data.prop
        this.parameterweblist.sorter.order = data.order
        this.getdata()
      }
    },
    getdata () {
      $http.option('/api/safe/weblist', this.parameterweblist).then(({ status, msg, data } = {}) => {
        if (status === 'success') {
          this.getweblist = data
        } else if (status === 'fail') {
				  Notification.error({
            title: '数据获取异常',
            message: msg
				  })
        }
      })
    }
  },
  watch: {
    changeSizeValue (val) {
      if (document.getElementById('scoreTrend') &&
                document.getElementById('webcount') &&
                document.getElementById('circle')) {
        this.$refs.risktype.myChart.resize()
        this.$echarts.init(document.getElementById('scoreTrend')).resize()
        this.$echarts.init(document.getElementById('webcount')).resize()
        this.$echarts.init(document.getElementById('circle')).resize()
      }
    },
    $route (to, from) {
      if (to.name === '@安全状态画像') {
        if (document.getElementById('scoreTrend') &&
                document.getElementById('webcount') &&
                document.getElementById('circle')) {
          this.$refs.risktype.myChart.resize()
          this.$echarts.init(document.getElementById('scoreTrend')).resize()
          this.$echarts.init(document.getElementById('webcount')).resize()
          this.$echarts.init(document.getElementById('circle')).resize()
        }
      }
    },
    radio3 (newVal) {
      let select_time = 0
      switch (newVal) {
        case '30天' :
          select_time = 30
          break
        case '90天' :
          select_time = 90
          break
        case '半年' :
          select_time = 183
          break
        case '一年' :
          select_time = 365
          break
        case '全部' :
          select_time = 1000
          break
      }
      this.$store.dispatch('safePortraiat/scoringTrend', select_time)
    }
  },
  mounted () {
    this.$store.dispatch('safePortraiat/webcompreScore')
    this.$store.dispatch('safePortraiat/threatarea')
    this.$store.dispatch('safePortraiat/alarmarea')
    this.$store.dispatch('safePortraiat/webScore')
    this.$store.dispatch('safePortraiat/scoringTrend', 30)
    this.getdata()
  },
  computed: {
    ...mapState({
      tablewebcompreScore: state => state.safePortraiat.tablewebcompreScore,
      changeSizeValue: state => state.system.changeSizeValue,
      tablegetwebnum: state => state.safePortraiat.tablegetwebnum,
      tablethreatarea: state => state.safePortraiat.tablethreatarea,
      tablewebScore: state => state.safePortraiat.tablewebScore,
      tableNewTime: state => state.safePortraiat.tableNewTime
    })
  }
}
</script>
<style lang='less'>
// vh 视口高度 8vh 
// vw 视口宽度 8vw
@import './style/portraitHead.less';
</style>

<!-- 组件内部样式 -->
<style>
#portraithead .at-radio-button__inner {
  width:70px;
}
</style>
